<template>
  <div id="plant">
    <!-- 泥土 -->
    <div class="soil">
      <!-- 作物 -->
      <!-- 计算属性返回空字符串表示当前未种植植物, 直接剔除 -->
      <img v-if="hasPlant" :src="data.image" alt="" class="plant" @click="handleClick" />
      <!-- 进度条 -->
      <div class="progress" v-if="hasPlant">
        <!-- 进度, 根据水量/总水量动态显示 -->
        <div class="water" v-if="data.isMature" :style="{ width: '100%' }"></div>
        <div class="water" v-else :style="{ width: `${(data.currentWater / data.waterToNextStage) * 100}%` }"></div>
        <div class="value">{{ data.isMature ? '可收获' : data.currentWater + '/' + data.waterToNextStage }}</div>
        <div class="name">
          {{ data.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PlantComponent',
  data() {
    return {}
  },
  props: ['data'],
  computed: {
    // 有没有作物
    hasPlant() {
      return this.data.currentWater >= 0
    }
  },
  methods: {
    // 处理点击事件
    handleClick() {
      // 如果当前作物已经成熟, 点击收获作物
      if (this.data.isMature) {
        this.$emit('harvest')
      } else {
        console.log('还没成熟')
      }
    }
  }
}
</script>

<style scoped>
#plant {
  width: 100vw;
  margin: 0px auto;
  /* border: 1px solid; */
}

.soil {
  width: 324px;
  height: 72px;
  background: url('@/assets/soil.png') center center no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: 0px auto;
}

.plant {
  width: 324px;
  position: absolute;
  bottom: 0px;
}

.progress {
  width: 660px;
  height: 30px;
  margin: 0px auto;
  border-radius: 30px;
  border: 5px solid lightyellow;
  position: absolute;
  bottom: -50px;
  left: -168px;
  background-color: rgb(221, 243, 243);
}

.water {
  width: 100%;
  height: 30px;
  border-radius: 30px;
  position: absolute;
  left: 0px;
  background-color: rgb(120, 200, 227);
}

.progress .value {
  width: 100%;
  height: 100%;
  line-height: 100%;
  font-size: 30px;
  position: absolute;
  left: 0px;
  text-align: center;
}

.name {
  height: 30px;
  min-width: 100px;
  position: absolute;
  left: 10px;
  top: -30px;
  background-color: lightyellow;
  border-radius: 10px 10px 0 0;
  text-align: center;
  line-height: 30px;
  font-size: 24px;
  padding: 0px 5px;
}
</style>
